<template>
  <div class="app-switchlist-menu">
    <el-divider direction="vertical"></el-divider>
    <div class="switch">
      <a @click="changeDisplayModel(0)">
        <i :class="menuIndex === 0 ? 'el-icon-menu active' : 'el-icon-menu'"></i
      ></a>
      <a @click="changeDisplayModel(1)">
        <i
          :class="
            menuIndex === 1
              ? 'fa fa-navicon active'
              : 'fa fa-navicon'
          "
        ></i>
      </a>
    </div>
  </div>
</template>

<script lang="ts">
import {
  Vue,
  Component,
  Prop,
  Model,
  Emit,
  Watch,
  Provide,
} from "vue-property-decorator";

import "./app-switchlist-menu.less";

@Component({})
export default class AppSwitchListMenu extends Vue {

  /**
   * 切换菜单值
   *
   * @type {number}
   * @memberof AppSwitchList
   */
  public menuIndex: number = 0;

  /**
   * 切换列表显示模式
   *
   * @event click
   * @param {number}
   * @memberof AppSwitchList
   */
  public changeDisplayModel(index: any) {
    if (this.menuIndex === index) return;
    this.menuIndex = index;
    this.$emit("changedisplaymodel", {});
  }
}
</script>
